<template>
  <main id="member" class="page">
    <page-banner v-if="is_show_member_banner" :bg_url="page.banner" :text="banner_title" />
    <page-banner v-else :bg_url="information.banner" :subtitle="information.subtitle" :text="information.title" />
    <template v-if="$route.name === 'UserLogin'">
      <section class="section-container">
        <div class="section-wrap">
          <h2 class="section-title">{{page.title}}</h2>
          <ValidationObserver v-slot="{ invalid }">
            <form class="form-wrap login-form" @submit.prevent="login">
              <div class="helper" v-for="(item,key) of page.helper" :key="key" v-html="item"></div>
              <Validater
                class="form-item col-2"
                name="email"
                rules="required|email"
                v-slot="{ errors }"
              >
                <label for="email" class="form-control">User name *</label>
                <input type="text" v-model="form.email" id="email" autocomplete="off" />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                class="form-item col-2"
                name="password"
                rules="required|min:6"
                v-slot="{ errors }"
              >
                <label for="pwd" class="form-control">
                  Password *
                  <router-link
                    :to="{name: 'UserForget'}"
                    class="forget-pwd-btn"
                  >Forgot your password?</router-link>
                </label>
                <input type="password" id="pwd" v-model="form.password" autocomplete="off" />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <div class="btn-wrap">
                <Button type="submit" text="LOG IN" :disabled="invalid" />
              </div>
            </form>
          </ValidationObserver>
        </div>
      </section>
    </template>
    <template v-else-if="$route.name === 'UserForget'">
      <section class="section-container">
        <div class="section-wrap">
          <h2 class="section-title">Reset password</h2>
          <ValidationObserver v-slot="{ invalid }">
            <form @submit.prevent="reset" class="form-wrap login-form">
              <Validater name="email" class="form-item" rules="required|email" v-slot="{ errors }">
                <label for="email" class="form-control">Email *</label>
                <input
                  type="text"
                  v-model="forget_form.email"
                  id="email"
                  placeholder="123456@gmail.com"
                  autocomplete="off"
                />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                class="form-item col-2 mt-30"
                name="password"
                rules="required|min:6"
                v-slot="{ errors }"
                via="password"
              >
                <label for="pwd" class="form-control">New Password *</label>
                <input type="password" v-model="forget_form.password" id="pwd" autocomplete="off" />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                class="form-item col-2 mt-30"
                name="Re-password"
                rules="required|confirmed:password"
                v-slot="{ errors }"
              >
                <label for="re_pwd" class="form-control">Re-enter password *</label>
                <input
                  type="password"
                  id="re_pwd"
                  v-model="forget_form.re_password"
                  autocomplete="off"
                />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                name="verify code"
                class="form-item mt-30 suffix"
                rules="required|length:4"
                v-slot="{ errors }"
              >
                <label for="verify" class="form-control">Mail verification code *</label>
                <input type="text" id="verify" v-model="forget_form.verify.code" autocomplete="off" />
                <div class="suffix">
                  <button
                    class="btn-verify forget_form"
                    :disabled="forget_form.verify.disabled"
                    @click.prevent="sendCode($event)"
                    v-text="cd<10 ? cd : 'Get code'"
                  ></button>
                </div>
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <div class="btn-wrap">
                <Button type="submit" text="RESET PASSWORD" :disabled="invalid" />
              </div>
            </form>
          </ValidationObserver>
        </div>
      </section>
    </template>
    <template v-else-if="$route.name === 'UserRegister'">
      <section class="section-container">
        <div class="section-wrap">
          <h2 class="section-title">REGISTER</h2>
          <ValidationObserver v-slot="{ invalid }">
            <form @submit.prevent="register" class="form-wrap login-form">
              <Validater name="email" class="form-item" rules="required|email" v-slot="{ errors }">
                <label for="email" class="form-control">Email *</label>
                <input type="text" v-model="register_form.email" id="email" autocomplete="off" />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                class="form-item col-2 mt-30"
                name="password"
                rules="required|min:6"
                v-slot="{ errors }"
                via="password"
              >
                <label for="pwd" class="form-control">New Password *</label>
                <input type="password" v-model="register_form.password" id="pwd" autocomplete="off" />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                class="form-item col-2 mt-30"
                name="Re-password"
                rules="required|confirmed:password"
                v-slot="{ errors }"
              >
                <label for="re_pwd" class="form-control">Re-enter password *</label>
                <input
                  type="password"
                  id="re_pwd"
                  v-model="register_form.re_password"
                  autocomplete="off"
                />
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <Validater
                name="verify code"
                class="form-item mt-30 suffix col-2"
                rules="required|length:4"
                v-slot="{ errors }"
              >
                <label for="verify" class="form-control">Mail verification code *</label>
                <input
                  type="text"
                  id="verify"
                  v-model="register_form.verify.code"
                  autocomplete="off"
                />
                <div class="suffix">
                  <button
                    class="btn-verify register_form"
                    :disabled="register_form.verify.disabled"
                    @click.prevent="sendCode"
                  >Get code</button>
                </div>
                <span class="input-error">{{errors[0]}}</span>
              </Validater>
              <div class="btn-wrap">
                <Button text="CREATE ACCOUNT" type="submit" :disabled="invalid" />
              </div>
            </form>
          </ValidationObserver>
        </div>
      </section>
    </template>
    <template v-else-if="/member\/information/.test($route.path)">
      <router-view></router-view>
    </template>
  </main>
</template>

<script>
import Button from "@/components/Button";
export default {
  name: "Member",
  components: {
    Button
  },
  data() {
    return {
      cd: 10,
      page: {
        banner: {
          "background-image": `url(${require("@/assets/img/login.jpg")})`
        },
        title: "Sign in to Your Account",
        helper: [
          `<p>1.SDAY is open ONLY to candidates from UNESCO Creative Cities (<a href="https://en.unesco.org/creative-cities/creative-cities-map" target="_blank">please find list of UCCN members here</a>)</p>`,
          `<p>2.Candidates MUST be nominated by nominators from UCCN member cities (<a href="/nomination" target="_blank">please find your nominator here</a>)</p>`
        ]
      },
      information: {
        title: 'SDAY 2019',
        subtitle: 'INCLUSIVE DESIGN',
        banner: {"background-image": `url(${require("@/assets/img/banner_other11.jpg")})`},
      },
      is_show_member_banner: true,
      form: {
        email: "490237797@qq.com",
        password: "123456"
      },
      forget_form: {
        email: "",
        password: "",
        re_password: "",
        verify: {
          disabled: true,
          code: ""
        }
      },
      register_form: {
        email: "",
        password: "",
        re_password: "",
        verify: {
          disabled: true,
          code: ""
        }
      }
    };
  },
  computed: {
    banner_title: function() {
      switch (this.$route.name) {
        case "UserForget":
          return "RESET PASSWORD";
        case "UserLogin":
          return "LOGIN";
        case "UserRegister":
          return "REGISTER";
        default:
          return "LOGIN";
      }
    }
  },
  methods: {
    login() {
      const userInfo = {
        city: "ShenZhen",
        country: "China",
        nominator: "SDPA",
        email: "490237797@qq.com",
        password: "123456",
        fullName: "A169kai",
        mobile: "18670138762",
        secondaryContact: "hello",
        address: "ZheJiang Hangzhou"
      };
      const usr = localStorage.getItem('usr')

      if (
        this.form.password !== "123456" ||
        this.form.email !== "490237797@qq.com"
      ) {
        this.toast({
          text: "Sorry, username or password invalid."
        });
      } else {
        this.$store.commit("LOGIN", usr? usr: userInfo);
        this.$router.push({ name: "UserInformation" });
      }
    },
    sendCode(event) {
      if (event.target.className.includes("forget_form")) {
        this.forget_form.verify.disabled = true;
      } else if (event.target.className.includes("register_form")) {
        this.register_form.verify.disabled = true;
      }

      this.cd = 10;
      let timer = setInterval(() => {
        this.cd--;
        if (this.cd < 1) {
          clearInterval(timer);
          this.cd = 10;
          if (event.target.className.includes("forget_form")) {
            this.forget_form.verify.disabled = false;
          } else if (event.target.className.includes("register_form")) {
            this.register_form.verify.disabled = false;
          }
        }
      }, 1000);
      this.toast({
        text: `Your verify code is ${Math.floor(Math.random() * (9999 - 1000)) +
          1000}`
      });
    },
    reset() {
      //TODO 设置完后自动登录
      this.toast({
        text: "hello toast!"
      });
    },
    toast({ title = "Notice", text }) {
      this.$modal.show("dialog", {
        title,
        text,
        buttons: [
          {
            title: "Close",
            handler: () => {
              this.$modal.hide("dialog");
            }
          }
        ]
      });
    }
  },
  watch: {
    "forget_form.email": {
      handler: function(v) {
        const emailReg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

        this.forget_form.verify.disabled = !emailReg.test(v);
      }
    },
    "register_form.verify.code": {
      handler: function(v) {
        this.register_form.verify.disabled = v.length !== 4;
      }
    },
    $route(to, from) {
      
      if (to.path.includes("/member/information")) {

        this.is_show_member_banner = false
      } else {
        this.is_show_member_banner = true
      }
    }
  }
};
</script>

<style scoped lang="scss">
.section-container {
  .section-title {
    padding-bottom: 25px;
    font: 700 32px/1.5 "Futura";
    color: #202020;
    letter-spacing: 0.02em;
    text-align: center;
    border-bottom: 1px solid #dbdbdb;
  }
  form.form-wrap {
    padding-top: 70px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .helper {
      font: 500 18px/40px "Futura";
      color: #202020;
      letter-spacing: 0.01em;
      flex: 1;
      flex-basis: 100%;
      /deep/ a,
      a:visited,
      a:active,
      a:focus {
        color: #202020;
        text-decoration: underline;
      }
    }

    .form-item {
      flex-basis: 100%;
      &.col-2 {
        flex-basis: 48%;
        &.suffix {
          input {
            flex-basis: 70%;
          }
          .suffix {
            flex-basis: 25%;
            margin-left: auto;
            button {
              width: 150px;
            }
          }
        }
      }
      &.suffix {
        display: flex;
        flex-wrap: wrap;
        label {
          flex: 1;
          flex-basis: 100%;
        }
        input {
          flex-basis: 80%;
        }
        .suffix {
          flex-basis: 20%;
          text-align: right;
          button {
            height: 100%;
            width: 200px;
            cursor: pointer;
            font: 500 18px/50px "Futura";
            letter-spacing: 0.02em;
            border: 0;
            outline: 0;
            &[disabled^="disabled"] {
              background-color: grey;
            }
            background-color: $primary;
            color: #fff;
            text-align: center;
            transition: all 0.3s;
          }
        }
      }
    }
    .forget-pwd-btn {
      float: right;
      font-size: 14px;
      color: grey;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
